<template>
  <div class="config-container">
    <!-- 页面标题和统计卡片 -->
    <div class="page-header">
      <div class="header-background">
        <div class="bg-pattern"></div>
        <div class="bg-gradient"></div>
      </div>
      
      <div class="page-title">
        <div class="title-with-back">
          <el-button 
            type="primary" 
            :icon="ArrowLeft" 
            @click="$router.push('/jobs')"
            class="blue-return-button"
            circle
          />
          <div class="title-icon">
            <div class="icon-container" style="width: 36px; height: 36px; background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); border-radius: 8px; color: white; box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);">
              <el-icon size="20"><Setting /></el-icon>
              <div class="icon-glow"></div>
            </div>
          </div>
          <div class="title-content">
            <div class="title-main">
              <h1>Flink监控配置</h1>
              <div class="title-badge">
                <el-icon><Star /></el-icon>
                <span>Config</span>
              </div>
            </div>
            <p class="page-description">
              <el-icon><Monitor /></el-icon>
              管理Flink集群监控系统的配置参数，支持分组管理和动态更新
            </p>
            <div class="title-meta">
              <div class="meta-item">
                <el-icon><Setting /></el-icon>
                <span>配置管理</span>
              </div>
              <div class="meta-item">
                <el-icon><Lock /></el-icon>
                <span>安全加密</span>
              </div>
              <div class="meta-item">
                <el-icon><DataAnalysis /></el-icon>
                <span>实时生效</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="page-stats">
        <div class="stat-card running">
          <div class="stat-icon">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.active || 0 }}</div>
            <div class="stat-label">已启用</div>
            <div class="stat-trend">
              <el-icon><Check /></el-icon>
              <span>生效中</span>
            </div>
          </div>
        </div>
        
        <div class="stat-card failed">
          <div class="stat-icon">
            <el-icon><Lock /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.sensitive || 0 }}</div>
            <div class="stat-label">敏感信息</div>
            <div class="stat-trend">
              <el-icon><Lock /></el-icon>
              <span>加密</span>
            </div>
          </div>
        </div>
        
        <div class="stat-card finished">
          <div class="stat-icon">
            <el-icon><Fold /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ Object.keys(groupStats).length }}</div>
            <div class="stat-label">配置分组</div>
            <div class="stat-trend">
              <el-icon><Fold /></el-icon>
              <span>分类</span>
            </div>
          </div>
        </div>

        <div class="stat-card total">
          <div class="stat-icon">
            <el-icon><Menu /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ totalAll || total }}</div>
            <div class="stat-label">总计</div>
            <div class="stat-trend">
              <el-icon><Menu /></el-icon>
              <span>全部</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card shadow="hover" class="search-card">
        <template #header>
          <div class="search-header">
            <div class="search-title">
              <el-icon><Search /></el-icon>
              <span>搜索与筛选</span>
            </div>
          </div>
        </template>
        <el-form :model="searchForm" class="search-form">
          <div class="search-form-content">
            <div class="search-form-fields">
              <el-form-item label="配置键名">
                <el-input
                  v-model="searchForm.config_key"
                  placeholder="请输入配置键名"
                  clearable
                  style="width: 220px"
                />
              </el-form-item>
              
              <el-form-item label="配置分组">
                <el-select 
                  v-model="searchForm.config_group" 
                  placeholder="选择分组" 
                  clearable 
                  style="width: 160px"
                >
                  <el-option label="全部" value="" />
                  <el-option
                    v-for="group in availableGroups"
                    :key="group"
                    :label="`${getGroupName(group)} (${groupStats[group] || 0})`"
                    :value="group"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item label="是否启用">
                <el-select 
                  v-model="searchForm.is_active" 
                  placeholder="选择状态" 
                  clearable 
                  style="width: 120px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="0" />
                </el-select>
              </el-form-item>

              <el-form-item label="敏感信息">
                <el-select 
                  v-model="searchForm.is_sensitive" 
                  placeholder="选择类型" 
                  clearable 
                  style="width: 120px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </div>
            
            <div class="search-form-actions">
              <el-button type="primary" @click="handleSearch" class="search-btn">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button type="warning" @click="handleReset" class="reset-btn">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
              <el-button type="success" @click="handleCreate">
                <el-icon><Plus /></el-icon>
                新增配置
              </el-button>
            </div>
          </div>
        </el-form>
      </el-card>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <el-card shadow="hover" class="table-card">
        <template #header>
          <div class="table-header">
            <div class="table-title">
              <el-icon><List /></el-icon>
              <span>配置列表</span>
              <el-tag v-if="total > 0" type="info" size="small">{{ total }} 条</el-tag>
            </div>
            <div class="table-actions">
              <el-button 
                type="success"
                size="small" 
                :icon="Refresh" 
                @click="loadConfigs"
                :loading="loading"
                class="refresh-btn"
              >
                刷新
              </el-button>
              <div class="table-info">
                <!-- 分页折叠控制 -->
                <div class="pagination-control-wrapper" @click="paginationExpanded = !paginationExpanded">
                  <span class="page-count">本页 {{ configs.length }} 条</span>
                  <div class="divider"></div>
                  <span class="pagination-info">{{ currentPage }}/{{ Math.ceil(total / pageSize) || 1 }}</span>
                  <el-icon class="pagination-icon" :class="{ 'expanded': paginationExpanded }">
                    <ArrowDown />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </template>

        <div class="table-container">
          <el-table
            :data="configs"
            v-loading="loading"
            class="enhanced-table"
            style="width: 100%"
            :height="600"
            :default-sort="{ prop: 'modified_time', order: 'descending' }"
            @sort-change="handleSortChange"
            table-layout="fixed"
          >
          <el-table-column
            prop="config_key"
            label="配置键名"
            min-width="280"
            fixed="left"
          >
            <template #default="{ row }">
              <div class="config-key-cell">
                <el-icon v-if="row.is_sensitive" style="color: var(--el-color-warning);">
                  <Lock />
                </el-icon>
                <el-icon v-if="row.restart_required" style="color: var(--el-color-danger);">
                  <Warning />
                </el-icon>
                <span>{{ row.config_key }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="config_group"
            label="配置分组"
            width="140"
          >
            <template #default="{ row }">
              <el-tag size="small" type="info">{{ getGroupName(row.config_group) }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="config_value"
            label="配置值"
            min-width="250"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <div class="config-value-cell">
                <span class="value-text">{{ row.config_value }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="config_type"
            label="类型"
            width="100"
          >
            <template #default="{ row }">
              <el-tag size="small" :type="getTypeTagType(row.config_type)">
                {{ row.config_type }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="is_active"
            label="状态"
            width="80"
          >
            <template #default="{ row }">
              <el-tag 
                size="small" 
                :type="row.is_active ? 'success' : 'info'"
              >
                {{ row.is_active ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="sort_order"
            label="排序"
            width="80"
          />

          <el-table-column
            prop="description"
            label="描述"
            min-width="350"
            show-overflow-tooltip
          />

          <el-table-column
            prop="modified_time"
            label="修改时间"
            width="180"
            sortable="custom"
          />

          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template #default="{ row }">
              <div class="action-buttons">
                <el-tooltip content="编辑配置" placement="top">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(row)"
                    circle
                  >
                    <el-icon><Edit /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="删除配置" placement="top">
                  <el-button
                    type="danger"
                    size="small"
                    @click="handleDelete(row)"
                    circle
                  >
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        </div>

        <!-- 可折叠分页 -->
        <transition name="pagination-slide">
          <div v-show="paginationExpanded" class="pagination-section">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              background
            />
          </div>
        </transition>
      </el-card>
    </div>

    <!-- 编辑对话框 -->
    <ConfigEditDialog
      v-model="showEditDialog"
      :config-data="currentConfig"
      :available-groups="availableGroups"
      @success="handleEditSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Setting, Search, Refresh, Plus, List, Edit, Delete, Star, Monitor,
  DataAnalysis, Menu, Check, Fold, Lock, Warning, ArrowDown, Back, ArrowLeft
} from '@element-plus/icons-vue'
import api from '@/utils/api'
import { createLogger } from '@/utils/logger'
import ConfigEditDialog from './components/ConfigEditDialog.vue'

const componentLogger = createLogger('FlinkMonitorConfig')

// 数据状态
const configs = ref([])
const loading = ref(false)
const total = ref(0)
const totalAll = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const groupStats = ref({})
const availableGroups = ref([])

// 搜索表单
const searchForm = reactive({
  config_key: '',
  config_group: '',
  is_active: '',
  is_sensitive: ''
})

// 排序
const sortField = ref('modified_time')
const sortOrder = ref('desc')

// 对话框
const showEditDialog = ref(false)
const currentConfig = ref(null)

// 分页折叠状态
const paginationExpanded = ref(false)

// 统计数据
const stats = computed(() => {
  return {
    active: configs.value.filter(c => c.is_active === 1).length,
    sensitive: configs.value.filter(c => c.is_sensitive === 1).length
  }
})

// 配置分组中文映射
const groupNameMap = {
  'general': '通用配置',
  'alert': '告警配置',
  'database': '数据库配置',
  'flink': 'Flink配置',
  'log': '日志配置',
  'monitor': '监控配置',
  'retention': '保留策略',
  'savepoint': 'Savepoint配置'
}

// 获取分组中文名
const getGroupName = (group) => {
  return groupNameMap[group] || group
}

// 加载配置列表
const loadConfigs = async () => {
  try {
    loading.value = true
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      sort: sortField.value,
      order: sortOrder.value,
      ...searchForm
    }

    // 清理空值
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null || params[key] === undefined) {
        delete params[key]
      }
    })

    const response = await api.get('/flink-monitor-config', { params })
    const result = response.data

    if (result.success) {
      const data = result.data
      configs.value = data.rows || []
      total.value = data.total || 0
      totalAll.value = data.total_all || data.total || 0
      groupStats.value = data.group_stats || {}
      
      componentLogger.info('配置列表加载成功', { total: total.value })
    } else {
      throw new Error(result.message || '加载失败')
    }
  } catch (error) {
    componentLogger.error('加载配置列表失败', error)
    ElMessage.error('加载配置列表失败')
  } finally {
    loading.value = false
  }
}

// 加载分组列表
const loadGroups = async () => {
  try {
    const response = await api.get('/flink-monitor-config/groups')
    const result = response.data
    
    if (result.success) {
      availableGroups.value = (result.data || []).map(g => g.config_group)
    }
  } catch (error) {
    componentLogger.error('加载分组列表失败', error)
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  loadConfigs()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    config_key: '',
    config_group: '',
    is_active: '',
    is_sensitive: ''
  })
  currentPage.value = 1
  sortField.value = 'modified_time'
  sortOrder.value = 'desc'
  loadConfigs()
}

// 分页
const handlePageChange = (page) => {
  currentPage.value = page
  loadConfigs()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadConfigs()
}

// 排序（只允许修改时间排序）
const handleSortChange = ({ prop, order }) => {
  // 只允许 modified_time 字段排序
  if (prop && order && prop === 'modified_time') {
    sortField.value = prop
    sortOrder.value = order === 'ascending' ? 'asc' : 'desc'
    loadConfigs()
  } else if (!prop || !order) {
    // 清除排序时，恢复默认排序
    sortField.value = 'modified_time'
    sortOrder.value = 'desc'
    loadConfigs()
  }
  // 如果是不允许排序的字段，不做任何处理
}

// 新增
const handleCreate = () => {
  currentConfig.value = null
  showEditDialog.value = true
}

// 编辑
const handleEdit = (row) => {
  currentConfig.value = { ...row }
  showEditDialog.value = true
}

// 删除
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除配置 "${row.config_key}" 吗？${row.restart_required ? '\n\n⚠️ 此配置需要重启系统，删除后请谨慎操作。' : ''}`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }
    )

    const response = await api.delete(`/flink-monitor-config/${row.id}`)
    const result = response.data

    if (result.success) {
      ElMessage.success('配置删除成功')
      
      // 如果当前页只有一条数据且不是第一页，则回到上一页
      if (configs.value.length === 1 && currentPage.value > 1) {
        currentPage.value--
      }
      
      loadConfigs()
      loadGroups()
    } else {
      throw new Error(result.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      componentLogger.error('删除配置失败', error)
      ElMessage.error(error.response?.data?.message || '删除配置失败')
    }
  }
}

// 编辑成功回调
const handleEditSuccess = () => {
  loadConfigs()
  loadGroups()
}

// 获取类型标签样式
const getTypeTagType = (type) => {
  const typeMap = {
    string: '',
    int: 'success',
    float: 'success',
    boolean: 'warning',
    json: 'danger',
    list: 'info'
  }
  return typeMap[type] || ''
}

// 初始化
onMounted(() => {
  loadConfigs()
  loadGroups()
})
</script>

<style scoped>
.config-container {
  padding: 0;  /* 页面容器不设置内边距，距离菜单栏的20px由布局的.content提供 */
  background: var(--el-bg-color-page);
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  border-radius: 12px;
  overflow: hidden;
  color: #303133;
  min-height: 120px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 返回按钮样式 */
.title-with-back {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.blue-return-button {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.blue-return-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  background: linear-gradient(135deg, #66b3ff 0%, #409eff 100%);
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  opacity: 1;
}

.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(64, 158, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(64, 158, 255, 0.05) 0%, transparent 50%);
  animation: patternMove 30s ease-in-out infinite;
}

@keyframes patternMove {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-10px) translateY(-5px); }
  50% { transform: translateX(5px) translateY(-10px); }
  75% { transform: translateX(-5px) translateY(5px); }
}

.page-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.title-icon {
  position: relative;
}

.icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: inherit;
  filter: blur(8px);
  opacity: 0.5;
  z-index: -1;
}

.title-content {
  flex: 1;
}

.title-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.title-main h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  letter-spacing: -0.3px;
}

.title-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-description {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-meta {
  display: flex;
  gap: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #909399;
  font-size: 12px;
  font-weight: 500;
}

/* 统计卡片 */
.page-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 120px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.stat-card.running .stat-icon {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.stat-card.failed .stat-icon {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.stat-card.finished .stat-icon {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.stat-card.total .stat-icon {
  background: rgba(144, 147, 153, 0.1);
  color: #909399;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #909399;
  font-weight: 500;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 20px;
}

.search-card {
  border-radius: 8px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-title .el-icon {
  color: #409eff;
}

.search-form {
  margin: 0;
}

.search-form-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.search-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1;
}

.search-form-fields .el-form-item {
  margin-bottom: 0;
}

.search-form-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* 搜索按钮和重置按钮的图标颜色 */
.search-btn .el-icon {
  color: #fff;
}

.reset-btn .el-icon {
  color: #fff;
}

/* 表格区域 */
.table-section {
  margin-bottom: 20px;
}

.table-card {
  border-radius: 8px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-title .el-icon {
  color: #409eff;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-container {
  width: 100%;
  overflow-x: visible;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff;
}

.enhanced-table {
  width: 100%;
}

.config-key-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.config-value-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.value-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.action-buttons .el-button {
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .el-button:active {
  transform: translateY(0) scale(0.98);
}

.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409EFF 0%, #66B3FF 100%);
  border: none;
}

.action-buttons .el-button--danger {
  background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
  border: none;
}

/* 分页折叠控制 */
.pagination-control-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(64, 158, 255, 0.08);
  border: 1px solid rgba(64, 158, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  font-size: 12px;
  height: 24px;
}

.pagination-control-wrapper:hover {
  background: rgba(64, 158, 255, 0.12);
  border-color: rgba(64, 158, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.page-count {
  font-size: 12px;
  font-weight: 500;
  color: #909399;
  line-height: 1;
}

.divider {
  width: 1px;
  height: 14px;
  background: rgba(64, 158, 255, 0.2);
}

.pagination-info {
  font-size: 12px;
  font-weight: 500;
  color: #409eff;
  line-height: 1;
}

.pagination-icon {
  font-size: 12px;
  color: #409eff;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-icon.expanded {
  transform: rotate(180deg);
}

/* 刷新按钮样式 */
.refresh-btn {
  background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.refresh-btn:hover {
  background: linear-gradient(135deg, #85CE61 0%, #67C23A 100%);
  box-shadow: 0 6px 20px rgba(103, 194, 58, 0.4);
  transform: translateY(-2px);
  color: #fff;
}

/* 分页折叠区域 */
.pagination-section {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.pagination-section .el-pagination {
  display: flex;
  justify-content: center;
}

/* 分页折叠动画 */
.pagination-slide-enter-active,
.pagination-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-slide-enter-from,
.pagination-slide-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* 响应式 */
@media (max-width: 1200px) {
  .page-stats {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .page-stats {
    flex-direction: column;
  }
  
  .stat-card {
    width: 100%;
  }
  
  .search-form-content {
    flex-direction: column;
  }
  
  .search-form-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}
</style>

